<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>商品详情</title>
    <link rel="stylesheet" href="../mui/css/mui.min.css" type="text/css" />
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>

<body class="bgc-fff">
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back"><i class="icon icon-back"></i></a>
	<h1 class="mui-title goods-lab">
    	<a href="javascript:" class="curr">商品</a>
    	<a href="javascript:">详情</a>
    </h1>
    <div class="top-right">
    	<a href="javascript:;" class="share-earn share">分享赚</a>
    </div>
</header>
<div class="mui-content">
	<div class="goods-hold">
        <div class="goods-mess" id="goodsMess">
        	<div>
                <div class="swiper-container goods-slide" id="spentContent">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(../images/example/example7.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(../images/example/example7.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(../images/example/example7.jpg)"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
                <div class="goods-top">
                    <h4>hisung 360度无线智能监控摄像头960P/1080P 家用手机远程监控器</h4>
                    <p class="c-bold c-red">券后包邮<span class="ml10">¥<i class="c-f18">85</i></span></p>
                </div>
                <div class="goods-cost">
                    <div class="oldcost c-bold">在售价：95</div>
                    <div class="c-t-center"><i class="icon icon-quan"></i>10元</div>
                    <div class="c-t-right">销量 43</div>
                </div>
                <div class="goods-sugg">
                    <h4>推荐理由</h4>
                    <p>手机远程监控，360度全景查看，高清摄像头，红外夜视自动切换，支持语音对讲，960P/1080P标配免费升级送8G储存卡！</p>
                </div>
                <div class="goods-like">
                    <h4 class="like-tit"><i class="icon icon-like"></i>猜您喜欢</h4>
                    <ul class="like-list">
                        <li>
                            <a href="#">
                                <div class="lil-img"><img src="../images/example/example4.jpg" alt="" /></div>
                                <h4 class="c-nowrap">微型网络摄像头微型网络摄像头</h4>
                                <p class="c-red">券后248</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="lil-img"><img src="../images/example/example4.jpg" alt="" /></div>
                                <h4 class="c-nowrap">微型网络摄像头微型网络摄像头</h4>
                                <p class="c-red">券后248</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="lil-img"><img src="../images/example/example4.jpg" alt="" /></div>
                                <h4 class="c-nowrap">微型网络摄像头微型网络摄像头</h4>
                                <p class="c-red">券后248</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="lil-img"><img src="../images/example/example4.jpg" alt="" /></div>
                                <h4 class="c-nowrap">微型网络摄像头微型网络摄像头</h4>
                                <p class="c-red">券后248</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="lil-img"><img src="../images/example/example4.jpg" alt="" /></div>
                                <h4 class="c-nowrap">微型网络摄像头微型网络摄像头</h4>
                                <p class="c-red">券后248</p>
                            </a>
                        </li>
                    </ul>
                </div>
        		<div class="pull-box"><i class="icon icon-pullup"></i>上拉查看图文详情</div>
            </div>
        </div>
        <div class="goods-intro" id="goodsIntro">
        	<div>
            	<div class="pull-box"><i class="icon icon-pulldown"></i>下拉返回商品详情</div>
            	<div class="img-box"><img src="../images/example/example8.jpg" alt="" /><img src="../images/example/example9.jpg" alt="" /><img src="../images/example/example8.jpg" alt="" /></div>
            </div>
        </div>
    </div>
    <div class="h46">
    	<div class="goods-bot">
        	<div class="gdb-left">
                <a class="collect" data-opera="collect"><i class="icon icon-collect"></i>收藏</a>
                <a class="share"><i class="icon icon-gshare"></i>分享</a>
            </div>
            <a href="javascript:;" class="gdb-buy"><i class="gdb-tip">省¥15</i>领劵购买</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../mui/js/mui.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<link rel="stylesheet" href="../widget/swiper/css/swiper.min.css" type="text/css" />
<script type="text/javascript" src="../widget/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
$(function(){
	var h = $(window).height() - 45 - $('.goods-bot').innerHeight();
	$('.goods-hold,.goods-mess,.goods-intro').height(h);
	var starY, moveY, isUp = false, isDown = true;
	var $top = document.getElementById('goodsMess');
	var $bottom = document.getElementById('goodsIntro');
	//下拉
	$('#goodsMess').scroll(function(e){
		if($(this).scrollTop() + $(this).height() == $(this).children('div').height()){
			isUp = true;
		}else{
			isUp = false;	
		}
	});
	$('#goodsMess').on('touchstart',function(e){
		if(isUp){
			starY = e.originalEvent.touches[0].pageY;
		}
	}).on('touchmove',function(e){
		if(isUp){
			moveY = e.originalEvent.touches[0].pageY;
			var ey = moveY - starY;
			if(ey < 0 && ey > -250){
				$top.style.webkitTransition = '0ms';
				$top.style.webkitTransform = 'translate3d(0px, '+ey/3+'px,0px)';
			}
		}else{
			starY = e.originalEvent.touches[0].pageY;
		}
	}).on('touchend',function(e){
		if(starY - moveY > 150){
			if(isUp){
				$top.style.webkitTransition = '600ms';
				$top.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
				$bottom.style.webkitTransition = '600ms';
				$bottom.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
				$bottom.scrollTop = 0;
				$('.goods-lab a:eq(1)').addClass('curr').siblings().removeClass('curr');
			}
		}else{
			$top.style.webkitTransition = '600ms';
	     	$top.style.webkitTransform = 'translate3d(0px, 0px,0px)';
		 	$bottom.style.webkitTransition = '600ms';
	     	$bottom.style.webkitTransform = 'translate3d(0px, 0px,0px)';
		 }
	});
	//上拉
	$('#goodsIntro').scroll(function(e){
		if($(this).scrollTop() == 0){
			isDown = true;
		}else{
			isDown = false;	
		}
	});
	$('#goodsIntro').on('touchstart',function(e){
		if(isDown){
			starY = e.originalEvent.touches[0].pageY;
		}
	}).on('touchmove',function(e){
		if(isDown){
			moveY = e.originalEvent.touches[0].pageY;
			var ey = starY - moveY;
			if(ey < 0 && ey > -250){
				var rt = h+ey/3;
				$bottom.style.webkitTransition = '0ms';
				$bottom.style.webkitTransform = 'translate3d(0px, -'+rt+'px,0px)';
			}
		}else{
			starY = e.originalEvent.touches[0].pageY;
		}
	}).on('touchend',function(e){
		if(moveY - starY > 150){
			if(isDown){
				$top.style.webkitTransition = '600ms';
				$top.style.webkitTransform = 'translate3d(0px, 0px,0px)';
				$bottom.style.webkitTransition = '600ms';
				$bottom.style.webkitTransform = 'translate3d(0px, 0px,0px)';
				$top.scrollTop = 0;
				$('.goods-lab a:eq(0)').addClass('curr').siblings().removeClass('curr');
			}
		}else{
			$top.style.webkitTransition = '600ms';
	     	$top.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
		 	$bottom.style.webkitTransition = '600ms';
	     	$bottom.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
		}
	});
	
	$('.goods-lab a').click(function(){
		$(this).addClass('curr').siblings().removeClass('curr');
		if($(this).index() == 0){
			$top.style.webkitTransition = '300ms';
			$top.style.webkitTransform = 'translate3d(0px, 0px,0px)';
			$bottom.style.webkitTransition = '300ms';
			$bottom.style.webkitTransform = 'translate3d(0px, 0px,0px)';
			$top.scrollTop = 0;
			$('.goods-lab a:eq(0)').addClass('curr').siblings().removeClass('curr');
		}else{
			$top.style.webkitTransition = '300ms';
			$top.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
			$bottom.style.webkitTransition = '300ms';
			$bottom.style.webkitTransform = 'translate3d(0px, -'+h+'px,0px)';
			$bottom.scrollTop = 0;
			$('.goods-lab a:eq(1)').addClass('curr').siblings().removeClass('curr');
		}
	});
});
var spentContent = new Swiper('#spentContent', {
	pagination: {
		el: '.swiper-pagination',
	},
});

$('.mui-content,.mui-bar-nav').on('click','.share',function(){
	var con = '【同仁堂珍珠粉0.3g*60瓶天然同仁堂食用珍珠粉内服外用可制面膜粉），原价15.9元，抢券省10元】复制这条信息￥Uqxc0Qm4hwI￥后打开靓粉吧';
	sharepop(con);
});
</script>
</body>
</html>